<template>
	<div>
		<div>
			<Search :tableData="tableData" @handelSearch="tableData.searchCb" />
		</div>
		<div style="margin-top: 10px">
			<HandleBtns :tableData="tableData" />
		</div>

		<div style="margin-top: 10px">
			<Table :tableData="tableData" />
		</div>
		<div style="display: flex; justify-content: center; margin-top: 10px">
			<Pagination :tableData="tableData" />
		</div>
		<Form :tableData="tableData" />
	</div>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
import Search from "./components/Search.jsx";
import HandleBtns from "./components/HandleBtns.jsx";
import Table from "./components/Table.jsx";
import Pagination from "./components/Pagination.jsx";
import Form from "./components/Form.jsx";
const props = defineProps({
	tableData: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
const tableData = ref(props.tableData);
</script>

<style lang="scss" scoped></style>
